<template>
	<view class="page">
		<view class="list-box">
			<uni-swipe-action>
			    <uni-swipe-action-item 
				v-for="(item,index) in listData" 
				:key="item.address_id"
				:right-options="options" 
				@click="onSwipeClick" 
				@change="swipeChange($event, index)">
					<view class="item-box" @tap="onChoose(item)">
						<view class="item-box_left">
							<view class="item-box_left_top">
								<text class="item-label" v-if="item.is_default">默认</text>
								<text class="item-name">{{item.consignee}}</text>
								<text class="item-phone">{{item.mobile}}</text>
							</view>
							<view class="item-box_left_bottom">
								<text class="item-city">{{item.address_list}}</text>
								<text class="item-site">{{item.address}}</text>
							</view>
						</view>
						<view class="item-box_right">
							<uni-icons @tap="onEdit(item)" type="compose" size="60rpx" color="#333333"></uni-icons>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		<!-- 新建地址 -->
		<view class="create-btn" @tap="createAddress">
			<uni-icons type="plusempty" size="28rpx" color="#E81526"></uni-icons>
			<text class="create-btn_text">新建地址</text>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import {getAddressListApi,delAddressApi} from '@/api/user.js'
	export default {
		computed: {
			...mapState(['user_id','token'])
		},
		data() {
			return {
				listData: [],
				options:[{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
				currentIndex: 0
			};
		},
		onLoad() {
			// this.getAddressList()
		},
		onShow() {
			this.getAddressList()
		},
		methods: {
			onChoose(item) {
				uni.navigateTo({
					url: `/pages/aPackage/orderConfirm/orderConfirm?consignee=${item.consignee}&mobile=${item.mobile}&address=${item.address}&is_default=${item.is_default}`
				})
			},
			async onSwipeClick(e){
				const res = await delAddressApi({
					id: this.listData[this.currentIndex].address_id,
					user_id: this.user_id,
					token: this.token
				})
				this.listData.splice(this.currentIndex,1)
			},
			swipeChange(e,index){
			  this.currentIndex = index
			},
			async getAddressList() {
				const res = await getAddressListApi({
					user_id: this.user_id,
					token: this.token
				})
				this.listData = res.data.info.reverse()
			},
			createAddress() {
				uni.navigateTo({
					url: '/pages/aPackage/addAddress/addAddress'
				})
			},
			onEdit(item) {
				const {address_id = null} = item
				uni.navigateTo({
					url: `/pages/aPackage/addAddress/addAddress?address_id=${address_id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.list-box {
	padding-bottom: 150rpx;
	.item-box {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #f5f5f5;
		&_left {
			width: 600rpx;
			&_top {
				.item-label {
					font-size: 24rpx;
					color: #ffffff;
					background-color: red;
					display: inline-block;
					padding: 4rpx 10rpx;
					border-radius: 8rpx;
					margin-right: 10rpx;
				}
				.item-name {
					font-size: 28rpx;
					color: #333333;
					margin-right: 10rpx;
				}
				.item-phone {
					font-size: 28rpx;
					color: #333333;
				}
			}
			&_bottom {
				margin-top: 10rpx;
				.item-city {
					line-height: 38rpx;
					font-size: 28rpx;
					color: #333333;
					margin-right: 10rpx;
				}
				.item-site {
					font-size: 28rpx;
					color: #333333;
					line-height: 38rpx;
				}
			}
		}
		&_right {
			
		}
	}
}
.create-btn {
	position: fixed;
	left: 30rpx;
	right: 30rpx;
	bottom: 30rpx;
	height: 80rpx;
	border-radius: 8rpx;
	border: 1rpx solid #E81526;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ffffff;
	&_text {
		font-size: 28rpx;
		color: #E81526;
		margin-left: 10rpx;
	}
}
</style>
